<template>
  <div class="ball-wrap">
    <div class="ball-box">

      <div class="rule-box">
        <div class="rule" @click="open">规则说明</div>
      </div>
      <div class="title-box">
        <img src="./title_ball.png" class="pic1" onclick="return false"/>
      </div>
      <div class="jackpot-box">
        <span class="title">奖池</span>
        <img src="./table_ball.png" class="pic2" onclick="return false"/>
        <div class="number">{{totalScore}}</div>
        <span class="score">积分</span>
      </div>

      <div class="downtime-box">
        <div class="count-box">
          <span class="residue">倒计时:</span><span class="num">{{hour}}</span><span class="word">时</span><span
          class="num">{{minute}}</span><span
          class="word">分</span><span
          class="num">{{second}}</span><span class="word">秒</span>
        </div>
      </div>

      <div class="winner-box">
        <div class="draw-box">第{{periodNum}}期开奖号码</div>
        <div class="num-box" v-if="!winNum">
          <span>?</span><span>?</span><span>?</span>
        </div>
        <div class="num-box" v-else-if="winNum">
          <span v-for="(num,index) in winList" :key="index">{{num}}</span>
        </div>
        <div class="draw-lottery">
          <img src="./btn_nor.png" class="pic3" v-if="type == 1" @click="drawLottery" onclick="return false"/>
          <div class="dis-box" v-else-if="type == 2"><span class="dis-title">您抽选的号码为{{this.luckyNum}}</span></div>
        </div>

        <div class="record-box">
          <div class="btn-box">
            <span class="draw" :class="{'active1':check == 1}" @click="selectRecord">抽奖记录</span>
            <span class="draw" :class="{'active2':check == 2}" @click="selectHistory">历史开奖</span>
            <span class="draw" :class="{'active2':check == 3}" @click="selectUser">幸运用户</span>
          </div>

          <div class="draw-title" v-show="check == 1">
            <span>期数</span><span>抽奖号</span><span>状态</span><span>中奖积分</span>
          </div>
          <div class="draw-title" v-show="check == 2">
            <span>期数</span><span>开奖号</span>
          </div>
          <div class="draw-title" v-show="check == 3">
            <span>期数</span><span>中奖积分</span><span>中奖人</span>
          </div>

          <div class="draw-list" v-show="showData == 1">
            <div v-if="check == 1">
              <div class="draw-win" v-for="(item,index) in periodList" :key="index"
                   :class="{'light-box':item.status == 1}">
                <span>第{{item.periodNum}}期</span><span>{{item.luckyNum}}</span><span>{{item.status | changeStatus}}</span><span>{{item.getScore}}</span>
              </div>
              <div class="more" v-if="periodList.length >= 2"><span @click="lookMore1">查看更多&nbsp;>></span></div>
            </div>

            <div v-if="check == 2">
              <div class="draw-win" v-for="(item,index) in periodList" :key="index">
                <span>第{{item.periodNum}}期</span>
                <div class="lucky-box" v-if="item.winNum"><span class="lucky-num"
                                                                v-for="(lucky,index) in item.winNum.split(',')"
                                                                :key="index">{{lucky}}</span>
                </div>
              </div>
              <div class="more" v-if="periodList.length >= 2"><span @click="lookMore2">查看更多&nbsp;>></span></div>
            </div>

            <div v-if="check == 3">
              <div class="draw-win" v-for="(item,index) in periodList" :key="index">
                <span>第{{item.periodNum}}期</span><span>{{item.getScore}}</span><span>{{item.userName}}</span>

              </div>
              <div class="more" v-if="periodList.length >= 2"><span @click="lookMore3">查看更多&nbsp;>></span></div>
            </div>

          </div>

          <div class="draw-empty" v-show="showData == 2">{{sky}}</div>
        </div>
      </div>

    </div>

    <!--抽奖号弹出层-->
    <div class="draw-modal" v-show="showModal">
      <div class="toast-con">
        <div class="toast-title">您本期抽选的是</div>
        <div class="number1">{{number}}<span class="number2">号</span></div>
        <div class="toast-btn" @click="closeModal">
          <img src="./btn_sure.png" class="pic4" onclick="return false"/>
        </div>
      </div>
    </div>

    <!--规则说明-->
    <div class="modal-wrap" v-show="showRule">
      <div class="modal-box">
        <div class="modal-con">
          <div class="title-box">
            <span class="title">规则说明</span>
            <img src="./del.png" class="del-icon" @click="close" onclick="return false"/>
          </div>
          <div class="rule-box">
            1.每周周一、周三、周五21:00进行开奖，每人每期最多购买一次，每次消耗50积分，所有购买幸运球消耗的积分都会放入奖池。
          </div>
          <div class="rule-box">
            2.每期开奖会随机抽取三个幸运号码进行匹配，抽中幸运号码的用户即为中奖用户，所有中奖用户均分奖池的60%积分。
          </div>
          <div class="rule-box">
            3.凡是通过非正常手段获取积分或者进行幸运球购买的行为，一经查证，我们将不再对其提供相应服务。
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import {baseUrl} from "../../../config/env"
  import {getUrlKey, doubleNum} from "../../../config/util"

  export default {
    inject: ['reload'],
    data() {
      return {
        totalScore: "",//奖池积分
        hour: "",
        minute: "",
        second: "",
        number: "",
        showModal: false,
        showRule: false,
        userSign: "",
        luckyNum: "",////当前用户幸运球
        periodNum: "",//幸运球期数
        winNum: "",//当期幸运球中奖号码,例如:1,56,89
        winList: [],
        intervalDate: null,
        countTime: null,
        type: 0,
        check: 1,//1为用户抽奖记录列表2为历史开奖记录列表
        showData: 0,
        periodList: [],
        sky: "",
        currentPage: 1,
        PageSize: 2
      }
    },
    mounted() {
      this.userSign = getUrlKey("id");
      this.init_lucky_ball();
      this.queryLuckyList();
      this.setScreen(".ball-wrap");
    },
    methods: {
      init_lucky_ball() {//初始化奖池
        //查询当期幸运球
        this.axios.get(baseUrl + "/prize/get_lucky_ball_detail?sgin=" + this.userSign).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0 && resultObj.data != null) {
            this.periodNum = resultObj.data.periodNum;
            this.totalScore = resultObj.data.totalScore;
            this.winNum = resultObj.data.winNum;
            this.countTime = resultObj.data.time;
            if (this.winNum != null) {
              this.winList = this.winNum.split(",")
            }
            this.luckyNum = resultObj.data.luckyNum;
            if ((this.luckyNum != null && this.luckyNum != "") || this.luckyNum == 0) {
              this.type = 2;
            } else {
              this.type = 1;
            }

            if (resultObj.data.delStatus == 0) {//0是未开奖
              //活动倒计时
              this.intervalDate = setInterval(() => {
                let nowTime = new Date().getTime();
                if (this.countTime >= nowTime) {//活动进行中
                  let t = this.countTime - nowTime;
                  let day = Math.floor(t / 1000 / 60 / 60 / 24);
                  let hours = Math.floor(t / 1000 / 60 / 60 % 24);
                  let minute = Math.floor(t / 1000 / 60 % 60);
                  let sec = Math.floor(t / 1000 % 60);
                  this.hour = doubleNum(parseInt(day * 24) + parseInt(hours));
                  this.minute = doubleNum(minute);
                  this.second = doubleNum(sec);
                }
                else {
                  clearInterval(this.intervalDate);
                }
              }, 100);
            } else {//1为已经开奖
              this.hour = "00";
              this.minute = "00";
              this.second = "00";
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      queryLuckyList() {//查询幸运球开奖记录列表
        this.axios.get(baseUrl + "/prize/get_lucky_ball_record_list?sgin=" + this.userSign + "&type=" + this.check + "&page=" + this.currentPage + "&size=" + this.PageSize).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0 && resultObj.data != null) {
            if (resultObj.data.length > 0) {
              this.showData = 1;
              this.periodList = resultObj.data;
            } else {
              if (this.check == 1) {
                this.sky = "暂无抽奖记录";
              } else if (this.check == 2) {
                this.sky = "暂无开奖记录";
              }
              this.showData = 2;
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      selectRecord() {//抽奖记录
        this.check = 1;
        this.queryLuckyList();
      },
      selectHistory() {//历史开奖
        this.check = 2;
        this.queryLuckyList();
      },
      selectUser() {//幸运用户
        this.check = 3;
        this.queryLuckyList();
      },
      lookMore1() {//抽奖记录查看更多
        this.$router.push({path: "/luckyballdraw", query: {id: this.userSign}});
      },
      lookMore2() {//历史开奖
        this.$router.push({path: "/luckyballlottery", query: {id: this.userSign}});
      },
      lookMore3() {//幸运用户
        this.$router.push({path: "/luckyballuser", query: {id: this.userSign}});
      },
      drawLottery() {//抽奖
        this.$vux.loading.show({
          text: '加载中',
        });
        let data = {};
        this.axios.post(baseUrl + "/prize/add_lucky_ball_record?sgin=" + this.userSign, data).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0) {
            if (resultObj.data < 0) {
              this.$vux.toast.text("抽取幸运球失败，请重试", "middle");
            } else {
              this.number = resultObj.data;
              this.luckyNum = resultObj.data;
              this.type = 2;
              this.showModal = true;

            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      open() {
        this.showRule = true;
      },
      close() {
        this.showRule = false;
      },
      closeModal() {
        this.reload();
        this.showModal = false;
      },
      setScreen(wrap) {//适配华为虚拟键遮挡
        let height = document.body.clientHeight;
        let width = document.body.clientWidth;
        let ratio = height / width;
        if (ratio < 1.55) {
          let max = document.querySelector(wrap);
          max.style.height = "17.95" + "rem";
          document.ontouchmove = function (e) {
          }
        }
      }
    },
    filters: {
      changeStatus(type) {
        if (type == 0) {
          return "等待开奖";
        } else if (type == 1) {
          return "中奖";
        } else {
          return "未中奖";
        }
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"

  .ball-wrap
    wh(100%, 100%)
    bg-image("./bg_ball.png", 100%, 100%)
    overflow: hidden
    .ball-box
      wh(100%, 100%)
      overflow: hidden
      .rule-box
        position: absolute
        top: 0.373rem
        right: 0
        fj(center, center)
        .rule
          text-align: center
          margin-left: auto
          wh(2.133rem, 0.773rem)
          line-height: 0.773rem
          background: rgba(255, 252, 224, 0.2)
          border-top-left-radius: 0.387rem
          border-bottom-left-radius: 0.387rem
          size-color(0.4rem, rgba(255, 255, 255, 1))
      .title-box
        fj(center, center)
        margin-top: 0.693rem
        margin-bottom: 0.04rem
        .pic1
          wh(4.24rem, 1.56rem)
      .jackpot-box
        position: relative
        fj(center, center)
        wh(8.52rem, 3.013rem)
        margin: 0 auto
        margin-bottom: 0.253rem
        .pic2
          wh(8.52rem, 3.013rem)
        .title
          position: absolute
          top: 0.64rem
          left: 0.747rem
          size-color(0.4rem, rgba(255, 255, 255, 0.8))
          font-weight: bold
          text-shadow: 0.16rem 0.187rem 0.533rem rgba(255, 104, 30, 0.8)
        .number
          position: absolute
          left: 0
          top: 0
          right: 0
          bottom: 0
          margin: auto
          fj(center, center)
          size-color(1.093rem, rgba(255, 255, 255, 1))
          text-shadow: 0.16rem 0.187rem 0.533rem rgba(255, 104, 30, 0.8)
          font-weight: bold
        .score
          position: absolute
          right: 0.64rem
          bottom: 0.84rem
          size-color(0.4rem, rgba(255, 255, 255, 1))
          font-weight: bold
          text-shadow: 0.16rem 0.187rem 0.533rem rgba(255, 104, 30, 0.8)
      .downtime-box
        fj(center, center)
        margin: 0 auto
        margin-bottom: 0.253rem
        wh(6.933rem, 0.853rem)
        background: rgba(255, 255, 255, 0.41)
        border-radius(0.427rem)
        .count-box
          fj(center, center)
          .residue
            padding-right: 0.2rem
            size-color(0.427rem, rgba(255, 255, 255, 1))
          .num
            wh(auto, 0.56rem)
            line-height: 0.64rem
            background: linear-gradient(0deg, rgba(255, 36, 134, 1), rgba(255, 107, 198, 1))
            border-radius(0.08rem)
            font-weight: 500
            size-color(0.373rem, rgba(255, 255, 255, 1))
            padding-left: 0.1rem
            padding-right: 0.1rem
            fj(center, center)
            @media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
              line-height: 0.56rem
            }
            @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-device-pixel-ratio: 3) {
              line-height: 0.56rem
            }
            @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
              line-height: 0.56rem
            }
            @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2) {
              line-height: 0.56rem
            }
            @media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) {
              line-height: 0.56rem
            }
            @media screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) {
              line-height: 0.56rem
            }
          .word
            padding-left: 0.2rem
            padding-right: 0.2rem
            size-color(0.427rem, rgba(255, 255, 255, 1))
      .winner-box
        margin: 0 auto
        wh(92.53%, 8.92rem)
        bg-image("./word_ball.png", 100%, 100%)
        overflow: hidden
        position: relative
        .draw-box
          margin-bottom: 0.427rem
          margin-top: 0.4rem
          text-align: center
          size-color(0.48rem, rgba(102, 102, 102, 1))
          font-weight: 500

        .num-box
          fj(center, center)
          margin-bottom: 0.4rem
          wh(100%, 0.8rem)
          span
            text-align: center
            line-height: 0.8rem
            wh(1.2rem, 0.8rem)
            background: rgba(161, 51, 255, 1)
            border-radius(0.053rem)
            size-color(0.453rem, rgba(255, 255, 255, 1))
            font-weight: 500
            &:nth-child(2)
              margin-left: 0.533rem
              margin-right: 0.533rem
        .draw-lottery
          margin: 0 auto
          margin-bottom: 0.387rem
          wh(6.04rem, 1.587rem)
          .pic3
            wh(100%, 100%)
          .dis-box
            fj(center, center)
            wh(6.04rem, 1.587rem)
            bg-image("./btn_dis.png", 100%, 100%)
            .dis-title
              size-color(0.52rem, rgba(255, 255, 255, 1))
              font-weight: bold
              text-shadow: 0.027rem 1px 0.12rem rgba(248, 124, 31, 1)
        .record-box
          wh(100%, auto)
          .btn-box
            wh(100%, 0.907rem)
            fj(center, center)
            size-color(0.4rem, rgba(146, 138, 153, 1))
            font-weight: 500
            .draw
              flex: 1
              text-align: center
              height: 0.907rem
              line-height: 0.907rem
            .active1
              background: rgba(255, 219, 202, 1)
              border-top-right-radius: 0.133rem
              color: rgba(255, 140, 39, 1)
            .active2
              background: rgba(255, 219, 202, 1)
              border-top-left-radius: 0.133rem
              border-top-right-radius: 0.133rem
              color: rgba(255, 140, 39, 1)
            .active3
              background: rgba(255, 219, 202, 1)
              border-top-left-radius: 0.133rem
              color: rgba(255, 140, 39, 1)
          .draw-title
            fj(center, center)
            wh(100%, 0.8rem)
            background: rgba(245, 235, 255, 1)
            margin-bottom: 0.2rem
            span
              flex: 1
              text-align: center
              size-color(0.373rem, rgba(146, 138, 153, 1))
              font-weight: 500

          .draw-list
            wh(100%, 1.28rem)
            overflow: hidden
            .draw-win
              fj(center, center)
              wh(100%, 0.64rem)
              span
                flex: 1
                text-align: center
                font-size: 0.347rem
                font-weight: 500
                color: rgba(146, 138, 153, 1)
              .lucky-box
                flex: 1
                text-align: center
                font-size: 0.347rem
                font-weight: 500
                color: rgba(146, 138, 153, 1)
                .lucky-num
                  &:nth-child(2)
                    padding-left: 0.24rem
                    padding-right: 0.24rem
            .light-box
              span
                color: rgba(252, 58, 145, 1)
            .more
              position: absolute
              bottom: 0.4rem
              text-align: center
              width: 100%
              size-color(0.347rem, #929292)
              font-weight: 500
          .draw-empty
            fj(center, center)
            wh(100%, 2.5rem)
            size-color(0.347rem, rgba(146, 138, 153, 1))
            font-weight: 500

    .draw-modal
      modal(fixed, 100, 0.5)
      overflow: hidden
      .toast-con
        wh(7.733rem, 6.413rem)
        bg-image("./modal.png", 100%, 100%)
        text-align: center
        .toast-title
          margin-top: 3.107rem
          size-color(0.48rem, rgba(254, 254, 254, 1))
        .number1
          margin-top: 0.28rem
          margin-bottom: 0.24rem
          size-color(0.48rem, #FDE80F)
          .number2
            size-color(0.48rem, rgba(254, 254, 254, 1))
        .toast-btn
          margin: 0 auto
          wh(4.84rem, 1.8rem)
          .pic4
            wh(100%, 100%)
    .modal-box
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 100
      background-color: rgba(0, 0, 0, 0.5)
      .modal-con
        position: absolute
        width: 100%
        height: 9.186666rem
        bottom: 0
        background: #FFF
        .title-box
          display: flex
          align-items: center
          width: 100%
          height: 1.333333rem
          border-bottom: 1px solid rgba(204, 204, 204, 1)
          .title
            display: flex
            justify-content: center
            width: 100%
            font-size: 0.44rem
            font-weight: 500
            color: rgba(27, 27, 27, 1)
          .del-icon
            position: absolute;
            width: 0.386666rem;
            height: 0.386666rem;
            right: 0.373333rem;
        .rule-box
          width: 92.53%
          height: auto
          margin: 0 auto
          margin-top: 0.373333rem
          font-size: 0.413333rem
          color: rgba(68, 68, 68, 1)
          line-height: 0.626666rem
          margin-bottom: 0.48rem
</style>
